{include file="header"}
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="postheader">
                <div class="w35">
                    <i class="layui-icon">&#xe6ed;</i>
                    电影信息录入窗口
                </div>
                <div class="w25"><span class="x-red">*</span>作品名:<span class="x-red">{$work.title}</span> </div>
            </div>
            <input type="hidden" name="dbname" value="movie">
            <input type="hidden" name="id" value="{$item.id}">
            <input type="hidden" name="work_id" value="{$item.work_id}">

            <fieldset class="layui-elem-field" style="margin-top: 50px;">
                <legend>基本信息</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label childlabel"><span class="x-red"></span></label>

                        <div class="layui-inline" style="width: 100px;">
                            <select name="cat" >
                                <option value="1" {if $item.cat eq 1}selected{/if}>剧场版</option>
                                <option value="2" {if $item.cat eq 2}selected{/if}>特别版</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            第<input type="text" name="words1" value="{$item.words1}" lay-verify="" autocomplete="off" class="layui-input nosel number" style="width: 70px;display: inline-block;">部;
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label childlabel"><span class="x-red">*</span>标题名称(中)</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" value="{$item.title}" lay-verify="required" autocomplete="off" class="layui-input nosel" >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label childlabel"><span class="x-red">*</span>(日)</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title_jp" value="{$item.title_jp}" lay-verify="required" autocomplete="off" class="layui-input nosel" >
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label childlabel"><span class="x-red"></span>放送日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="add_time" value="{$item.add_time?date('Y年m月d日',$item['add_time']):date('Y年m月d日',time())}" id="add_time" lay-verify="required" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label childlabel"><span class="x-red"></span>时长</label>
                            <div class="layui-input-inline">
                                <input type="text" name="time_lenth" value="{$item.time_lenth}"  autocomplete="off" class="layui-input nosel number" style="width: 70px;display: inline-block;">分钟;
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label childlabel"><span class="x-red"></span>发行公司</label>
                            <div class="layui-input-inline">
                                <input type="text" name="publisher" value="{$item.publisher}"  autocomplete="off" class="layui-input nosel">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label childlabel"><span class="x-red"></span>主题曲 (歌曲)</label>
                            <div class="layui-input-inline">
                                <input type="text" name="song_title" value="{$item.song_title}" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label childlabel"><span class="x-red"></span>(歌手)</label>
                            <div class="layui-input-inline">
                                <input type="text" name="song_man" value="{$item.song_man}" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </div>

                </div>


            </fieldset>
            <fieldset class="layui-elem-field">
    <legend>制作人员</legend>
    <div class="layui-field-box">
        <div class="layui-field-box">
            {for start="1" end="16"}
            <div class="layui-form-item staff">
                <label class="layui-form-label">
                    <p class="zh">{$catarray[$i]['zh']}</p>
                    <p class="jp">{$catarray[$i]['jp']}</p>
                </label>
                <div class="layui-inline staff_{$i}">
                    {if isset($staff[$i]) && count($staff[$i])>=1}
                    {foreach $staff[$i] as $val}
                    <div class="layui-inline stafflists" data-cat="{$i}">
                        <input type="text" name="staff_zh" value="{$val.username}" autocomplete="off" class="layui-input inline nosel" placeholder="中文名称">
                        <span>-</span>
                        <input type="text" name="staff_jp" value="{$val.username_jp}" autocomplete="off" class="layui-input inline nosel" placeholder="日文名称">
                    </div>
                    {/foreach}
                    {else}
                    <div class="layui-inline stafflists" data-cat="{$i}">
                        <input type="text" name="staff_zh" value="" autocomplete="off" class="layui-input inline nosel" placeholder="中文名称">
                        <span>-</span>
                        <input type="text" name="staff_jp" value="" autocomplete="off" class="layui-input inline nosel" placeholder="日文名称">
                    </div>
                    {/if}
                </div>
                <div class="layui-inline">
                    <a href="javascript:;" class="layui-btn layui-btn-xs" onclick="addstaff({$i})">添加</a>
                    <a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-xs" onclick="substaff({$i})">删除</a>

                </div>
            </div>
            {/for}
        </div>

    </div>
</fieldset>
            <fieldset class="layui-elem-field">
    <legend>该部出场者</legend>
    <div class="layui-field-box">
        <div class="tips">(包括本话出场的剧中角色以及相对应的的声优，若出场角色无台词，则声优可勾选无)</div>
        <div class="layui-card-header">
            <button type="button" class="layui-btn layui-btn-primary" onclick="addline()">添加</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="addlines()">批量添加</button>
            <button type="button" class="layui-btn layui-btn-primary selobj" onclick="sel()" data-type="sel">批量选择</button>
            <button type="button" class="layui-btn layui-btn-danger" onclick="del()">删除</button>
        </div>
        <table class="layui-table layui-form" id="setyuu_list">
            {volist name="seiyuulists" id="val"}
            {php}
            $id = "edit_".$key;
            {/php}
            <tr class="seiyuu_tr tr_{$id}">
                <td width="80"> <div style="display: none;" class="selone"><input type="checkbox" name="selone" value="{$id}" lay-skin="primary" ></div></td>
                <td>角色名：(中)<input type="text" name="role_zh" value="{$val.role_zh}" class="layui-input inline nosel"> (日)<input type="text" name="role_jp" value="{$val.role_jp}" class="layui-input inline nosel"></td>
                <td>声优：(中)<input type="text" name="seiyuu_zh" value="{$val.seiyuu_zh}" class="layui-input inline seiyuu_input nosel"> (日)<input type="text" name="seiyuu_jp" value="{$val.seiyuu_jp}" class="layui-input inline seiyuu_input nosel"> <input type="checkbox" name="cat" data-index="{$id}" value="2" class="cat2" lay-filter="seiyuu_cat" title="无" lay-skin="primary"> <input type="checkbox" name="cat" value="3" class="cat3" data-index="{$id}" lay-filter="seiyuu_cat" title="未知" lay-skin="primary"> </td>
            </tr>
            {/volist}
        </table>
    </div>
</fieldset>

            <div class="layui-form-item">
                <input type="hidden" name="display" value="0">
                <button  type="button" class="layui-btn" lay-filter="add" lay-submit="">
                    提交
                </button>
                <button  class="layui-btn layui-btn-primary" type="button" lay-filter="temporary" lay-submit="">
                    暂存
                </button>
                <button  class="layui-btn layui-btn-primary cancel" type="button">
                    取消
                </button>
            </div>
        </form>
    </div>
</div>
<div id="addlines" style="display: none;">
    <form class="layui-form" style="margin-top: 35px;margin-left: 30px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <input type="text" name="num" lay-verify="required" autocomplete="off" class="layui-input nosel number">
            </div>
            <div class="layui-inline">
                <button  type="button" class="layui-btn" lay-filter="addlines" lay-submit="">
                    添加
                </button>
            </div>
        </div>
    </form>
</div>


<script>
    layui.use(['laydate'],function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#add_time' //指定元素
            ,type:"date"
            ,format:"yyyy年MM月dd日"
        });
        $(document).on("change", '.number', function () {
            var num = parseInt($(this).val())
            var _this = $(this)

            if(isNaN(num) || num<=0){
                layui.msg("请输入数字")
                _this.val(null)
            }
        })
        form.on('checkbox(seiyuu_cat)',function (data) {
            var id = $(data.elem).data("index")
            var val = data.value
            if(data.elem.checked){
                if(val==2){
                    $(`.tr_${id}`).find('.cat3').prop("checked",false)
                    $(`.tr_${id}`).find('.seiyuu_input').val("")
                    $(`.tr_${id}`).find('.seiyuu_input').attr("readonly",true)
                    $(`.tr_${id}`).find('.seiyuu_input').css("backgroundColor","#e6e6e6")
                }else if(val==3){
                    $(`.tr_${id}`).find('.cat2').prop("checked",false)
                    $(`.tr_${id}`).find('.seiyuu_input').val("???")
                    $(`.tr_${id}`).find('.seiyuu_input').css("backgroundColor","#fff")

                }
                form.render('checkbox');
            }else{
                if(val==2){
                    $(`.tr_${id}`).find('.seiyuu_input').val("")
                    $(`.tr_${id}`).find('.seiyuu_input').attr("readonly",false)
                    $(`.tr_${id}`).find('.seiyuu_input').css("backgroundColor","#fff")

                }else if(val==3){
                    $(`.tr_${id}`).find('.seiyuu_input').val("")
                }

            }

        });
        //监听提交
        form.on('submit(temporary)', function(data) {
            let postfield = getfield(data)
            postfield.field.display = 1
            request("POST",'{:url("movie/post")}',postfield.field,function (res,msg) {
                //发异步，把数据提交给php
                layer.alert(msg, {icon: 6}, function() {
                    xadmin.close();
                    // 可以对父窗口进行刷新
                    xadmin.father_reload();
                });
            })

            return false;
        });
        //监听提交
        form.on('submit(add)', function(data) {
           let postfield = getfield(data)
            request("POST",'{:url("movie/post")}',postfield.field,function (res,msg) {
                //发异步，把数据提交给php
                layer.alert(msg, {icon: 6}, function() {
                    xadmin.close();
                    // 可以对父窗口进行刷新
                    xadmin.father_reload();
                });
            })

            return false;
        });

    })
    function getfield(data) {
        var staff=[];
        var stafflen = $('.stafflists').length
        var index = 0
        $('.stafflists').each(function () {
            var obj={
                cat:$(this).data("cat"),
                username:$(this).find('[name="staff_zh"]').val(),
                username_jp:$(this).find('[name="staff_jp"]').val(),
            };
            staff[index]=obj
            index ++;
        })
        data.field.staff=staff
        var seiyuu = [];
        $('.seiyuu_tr').each(function () {
            var index = $(this).index()
            var obj={
                role_zh: $(this).find('[name="role_zh"]').val(),
                role_jp:$(this).find('[name="role_jp"]').val(),
                seiyuu_zh:$(this).find('[name="seiyuu_zh"]').val(),
                seiyuu_jp:$(this).find('[name="seiyuu_jp"]').val(),
                cat:$(this).find('[name="cat"]:checked').val()?$(this).find('[name="cat"]:checked').val():1,
            }
            seiyuu[index] = obj
        })
        data.field.seiyuu=seiyuu
        return data;
    }
    function addstaff(id) {
        var html2=''
        html2 +=`<div class="layui-inline stafflists" data-cat="${id}">`
        html2 +=`<input type="text" name="staff_zh"  value="" autocomplete="off" class="layui-input inline nosel" placeholder="中文名称">`
        html2 +=`<span> - </span>`
        html2 +=`<input type="text" name="staff_jp"  value="" autocomplete="off" class="layui-input inline nosel" placeholder="日文名称">`
        html2 +='</div>'
        $('.staff_'+id).append(html2)

    }
    function substaff(id) {
        $('.staff_'+id+'>.layui-inline:last-child').remove()
    }
    function addline(num) {
        if(!num){
            num = 1
        }
        var html = ''
        var trlen = $('#setyuu_list').children("tr").length
        for (var i = 1;i<=num;i++){
            var id = `add_${trlen+i}`
            html +=`<tr class="seiyuu_tr tr_${id}">`
            html +=`<td width="80"> <div style="display: none;" class="selone"><input type="checkbox" name="selone" value="${id}" lay-skin="primary" ></div></td>`
            html +=`<td>角色名：(中)<input type="text" name="role_zh" value="" class="layui-input inline nosel"> (日)<input type="text" name="role_jp" value="" class="layui-input inline nosel"></td>`
            html +=`<td>声优：(中)<input type="text" name="seiyuu_zh" value="" class="layui-input inline seiyuu_input nosel"> (日)<input type="text" name="seiyuu_jp" value="" class="layui-input inline seiyuu_input nosel"> <input type="checkbox" name="cat" data-index="${id}" value="2" class="cat2" lay-filter="seiyuu_cat" title="无" lay-skin="primary"> <input type="checkbox" name="cat" value="3" class="cat3" data-index="${id}" lay-filter="seiyuu_cat" title="未知" lay-skin="primary"> </td>`

            html +='</tr>'
        }
        $('#setyuu_list').append(html)
        form.render()
    }
    function addlines() {
        var make_cat = $('[name="make_cat"]').val()
        if(make_cat!=3){
            layer.open({
                type: 1,
                title:'',
                content: $('#addlines')
                ,area: ['300px', '100px']
                ,success:function () {
                    //监听提交
                    form.on('submit(addlines)', function(data) {
                        addline(data.field.num)
                        layer.closeAll()
                        return false;
                    });
                }
            });
        }

    }
    function del() {
        var id;
        let seltype = $('.selobj').data("type")
        if(seltype==="sel"){
            id = [$('[name="selone"]').last().val()]
        }else{
            id = getselall()
        }
        for(let i in id){
            $(`.tr_${id[i]}`).remove()
        }
    }

    /**
     * @title 设置员工
     * @param datas
     */
    function setstaff(datas) {
        Object.keys(datas).forEach(function(key){

            var items = datas[key]
            if(items.length>0){
                var html=''

                var cat = items[0].cat
                $(`.staff_${cat}`).html('')
                for(var v=0;v<items.length;v++){
                    html +=`<div class="layui-inline stafflists" data-cat="${cat}">`
                    html +=`<input type="text" name="staff_zh" value="${items[v].uname}" autocomplete="off" class="layui-input inline nosel" placeholder="中文名称">`
                    html +=`<span>-</span>`
                    html +=`<input type="text" name="staff_jp" value="${items[v].uname_jp}" autocomplete="off" class="layui-input inline nosel" placeholder="日文名称">`
                    html +=`</div>`
                }

                $(`.staff_${cat}`).html(html)
            }

        });

    }

    /**
     * @title 设置声优
     * @param datas
     */
    function setseiyuu(datas) {
        var html=''
        $('#setyuu_list').html('')
        var trlen=0
        for(var i=0;i<datas.length;i++){
            var id = `add_${trlen+i}`
            html +=`<tr class="seiyuu_tr tr_${id}">`
            html +=`<td width="80"> <div style="display: none;" class="selone"><input type="checkbox" name="selone" value="${id}" lay-skin="primary" ></div></td>`
            html +=`<td>角色名：(中)<input type="text" name="role_zh" value="${datas[i].role_zh}" class="layui-input inline nosel"> (日)<input type="text" name="role_jp" value="${datas[i].role_jp}" class="layui-input inline nosel"></td>`
            html +=`<td>声优：(中)<input type="text" name="seiyuu_zh" value="${datas[i].seiyuu_zh}" class="layui-input inline seiyuu_input nosel"> (日)<input type="text" name="seiyuu_jp" value="${datas[i].seiyuu_jp}" class="layui-input inline seiyuu_input nosel">`
            if(datas[i].cat==2){
                html +=`<input type="checkbox" name="cat" data-index="${id}" value="2" class="cat2" checked lay-filter="seiyuu_cat" title="无" lay-skin="primary">`
            }else{
                html +=`<input type="checkbox" name="cat" data-index="${id}" value="2" class="cat2" lay-filter="seiyuu_cat" title="无" lay-skin="primary">`
            }
            if(datas[i].cat==3){
                html +=`<input type="checkbox" name="cat" value="3" class="cat3" data-index="${id}" checked lay-filter="seiyuu_cat" title="未知" lay-skin="primary">`
            }else{
                html +=`<input type="checkbox" name="cat" value="3" class="cat3" data-index="${id}" lay-filter="seiyuu_cat" title="未知" lay-skin="primary">`
            }
            html +='</td>'
            html +='</tr>'
        }
        $('#setyuu_list').html(html)

    }
</script>
{include file="footer"}